JSX 语法

概述

JSX（JavaScript XML）是一种在 React 中编写 UI 组件的语法扩展。它允许你在 JavaScript 代码中嵌入类似 HTML 的标记，使得组件的结构和逻辑可以更直观地结合在一起。JSX 最终会被编译成普通的 JavaScript 代码，以便在浏览器中运行。

为什么使用 JSX？

• 直观性：JSX 使得组件的结构和样式更加直观，易于理解和维护。
• 效率：通过 JSX，你可以直接在 JavaScript 中编写 UI 代码，避免了频繁地在 HTML 和 JavaScript 之间切换。
• 类型检查：JSX 可以与 TypeScript 结合使用，提供更好的类型检查和代码提示。

JSX 基础

1. JSX 元素

JSX 元素类似于 HTML 元素，但它们实际上是 JavaScript 对象。例如：

const element = <h1>Hello, world!</h1>;

这个 element 变量实际上是一个 React 元素，它描述了你想在屏幕上看到的内容。

2. 嵌套 JSX

你可以像嵌套 HTML 元素一样嵌套 JSX 元素：

const element = (
  <div>
    <h1>Hello!</h1>
    <p>Welcome to React</p>
  </div>
);

3. 属性

JSX 元素可以像 HTML 元素一样拥有属性：

const element = <img src="image.jpg" alt="A beautiful image" />;

4. 表达式

你可以在 JSX 中使用 JavaScript 表达式，只需用花括号 {} 包裹：

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

5. 条件渲染

你可以使用 JavaScript 的条件语句来控制 JSX 的渲染：

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
  </div>
);

6. 列表渲染

你可以使用 map 函数来渲染列表：

const items = ["Apple", "Banana", "Cherry"];
const element = (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

实践练习

练习 1：创建一个简单的 JSX 组件

创建一个简单的 JSX 组件，显示你的名字和一个问候语。

const Greeting = () => {
  const name = "Alice";
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

练习 2：条件渲染

创建一个组件，根据用户的登录状态显示不同的消息。

const UserGreeting = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
};

export default UserGreeting;

练习 3：列表渲染

创建一个组件，显示一个水果列表。

const FruitList = () => {
  const fruits = ["Apple", "Banana", "Cherry"];
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
};

export default FruitList;

总结

JSX 是 React 中编写 UI 组件的一种强大工具，它使得组件的结构和逻辑更加直观和易于维护。通过掌握 JSX 的基础知识，你可以更高效地开发 React 应用。

下一步

接下来，我们将学习 React 组件的基础知识，包括函数组件和类组件。这将帮助你更好地理解如何使用 JSX 来构建复杂的 UI 组件。